<template>
<div class="list-main">
<div class="list-nav">
    <el-menu class="list-menu">
      <el-submenu :index="item.key" v-for="item in leftList" :key="item.key">
        <template slot="title">
          <span>{{ item.key }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="Item in item.res"
            :index="Item[0]"
            :key="Item[0]"
            @click="changeSelect(item, Item)"
          >
            <p>
              <div class="biaozhumc" :title="Item[1]['biaozhuwzmc']">{{ Item[1]["biaozhuwzmc"] }}</div>
              <span style="margin-right:13px;">{{ Item[1]["count"] }}</span>
            </p>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</div>
  
</template>
<script>
import { lableCases, queryCaseLables } from "@api/details";
export default {
  name: "Left",
  data() {
    return {
      leftList: []
    };
  },
  mounted() {
    this._lableCases();
  },
  computed: {},
  methods: {
    changeSelect(parent, item) {},
    /* 获取已审案件data*/
    async _lableCases() {
      const { data } = await lableCases({
        anjianlx: "fushen",
        biaozhunr: "",
        biaozhuwzid: "",
        page: "1",
        size: "10",
        biaozhuflid: ""
      });
      console.log(data);
      this.leftList = Object.entries(data.classInfos).map(item => {
        let [key, res] = item;
        res = Object.entries(res);
        return {
          key,
          res
        };
      });
      console.log(this.leftList);
    }
  }
};
</script>
<style lang="scss" scoped>
// 公共
$main-color: #303133;
$blue-color: #2d54b8;
.el-dropdown-menu__item {
  font-size: 14px;
}
.biaozhumc{
  width: 120px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding-left:15px;
}
.list-nav {
  width: 264px;
   height:auto;
  border-left: 6px solid $blue-color;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 18px;
}
.list-menu {
  border-radius: 4px;
  border-right: 1px solid #dcdfe6;
  background-color: #ffffff;
  .el-submenu__title {
    padding: 0 13px 0 15px !important;
    background-color: #ebeef5;
    color: $blue-color;
    font-size: 16px;
  }
  .el-submenu__title i {
    color: $blue-color;
  }
  .el-submenu__icon-arrow {
    font-weight: 700;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-submenu {
    margin-bottom: 1px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-menu-item {
      height: 46px;
      line-height: 46px;
      padding: 0 !important;
      p {
        margin: 0 0 0 15px;
        border-bottom: 1px solid #e4e7ed;
        padding: 0 13px 0 0;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:focus,
      &:hover {
        p {
          border-bottom: 1px solid #ecf5ff;
        }
      }
      span {
        float: right;
        background-color: $blue-color;
        height: 24px;
        line-height: 24px;
        padding: 0 4px;
        color: #ffffff;
        border-radius: 4px;
        margin-top: 11px;
      }
    }
  }
}
.list-menu {
  .list-menu-more {
    margin: 0 10px 10px 10px;
    .el-button {
      width: 100%;
      border: 0;
      background: #ebeef5;
      border-radius: 10px;
      color: $blue-color;
    }
    .el-button--primary.is-plain:focus,
    .el-button--primary.is-plain:hover {
      color: #ffffff;
      background-color: $blue-color;
      i {
        color: #ffffff;
      }
    }
    i {
      color: $blue-color;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      font-size: 12px;
      margin: -2px 0 0 6px;
      font-weight: 700;
    }
  }
}
</style>
